<template>
  <el-container class="teacher-dashboard">
    <!-- 侧边栏 -->
    <el-aside class="sidebar" width="220px">
      <el-menu :default-active="currentView" class="menu" @select="switchView">
        <el-menu-item index="taskManagement"><i class="el-icon-s-order"></i>任务管理</el-menu-item>
        <el-menu-item index="gradingManagement"><i class="el-icon-s-data"></i>评分管理</el-menu-item>
        <el-menu-item index="progressTracking"><i class="el-icon-data-line"></i>进度追踪</el-menu-item>
        <el-menu-item index="appealsHandling"><i class="el-icon-warning"></i>申诉处理</el-menu-item>
        <el-menu-item index="historyAnalysis"><i class="el-icon-data-analysis"></i>历史任务分析</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧主内容区 -->
    <el-main class="content">
      <div class="board">
        <!-- 任务管理部分 -->
        <div v-if="currentView === 'taskManagement'">
          <h3>任务管理</h3>
          <div class="task-management-header">
            <router-link to="/createtask">
              <el-button type="primary">创建任务</el-button>
            </router-link>
            <div class="filter">
              <label for="status">筛选任务状态：</label>
              <select id="status" v-model="filterStatus" @change="fetchTasks">
                <option value="">全部</option>
                <option value="not_started">未开始</option>
                <option value="grouping_up">正在分组</option>
                <option value="task_division">正在分工</option>
                <option value="working">正在进行</option>
                <option value="scoring">等待评分</option>
                <option value="completed">已完成</option>
              </select>
            </div>
          </div>
          <ul>
            <li v-for="task in filteredTasks" :key="task.id" class="task-thumbnail">
              <h4>{{ task.title }}</h4>
              <p>{{ task.description }}</p>
              <p>最小组员数：{{ task.min_group_size }}</p>
              <p>最大组员数：{{ task.max_group_size }}</p>
              <p>截止日期：{{ task.deadline }}</p>
              <p>评分标准：{{ task.scoring_criteria }}</p>
              <p>状态：{{ task.status }}</p>
              <el-button size="small" type="primary" @click="viewTask(task)">查看详情</el-button>
              <el-button size="small" type="warning" @click="editTask(task)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteTask(task.id)">删除</el-button>
            </li>
          </ul>
        </div>

        <!-- 进度追踪部分 -->
        <div v-if="currentView === 'progressTracking'">
          <div class="section-header">
            <h3><i class="el-icon-data-line"></i> 进度追踪</h3>
            <el-button type="primary" icon="el-icon-refresh" @click="fetchProgressData" size="small">刷新数据</el-button>
          </div>
          
          <div v-if="progressData.length === 0" class="empty-data">
            <i class="el-icon-data-analysis"></i>
            <p>暂无进度数据</p>
          </div>
          
          <div v-else class="progress-grid">
            <el-card 
              v-for="group in progressData" 
              :key="group.group_id" 
              class="progress-card" 
              shadow="hover"
            >
              <div class="progress-header">
                <h4 class="task-group-title">{{ group.task_title }} <span class="separator">-</span> {{ group.group_name }}</h4>
                <div class="leader-info">
                  <i class="el-icon-user"></i> 组长：<strong>{{ group.leader.username }}</strong>
                </div>
              </div>
              
              <div class="progress-content">
                <div class="stats-container">
                  <div class="stat-item">
                    <div class="stat-value">{{ group.total_subtasks }}</div>
                    <div class="stat-label">总任务数</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ group.in_progress }}</div>
                    <div class="stat-label">进行中</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ group.on_time }}</div>
                    <div class="stat-label">按时完成</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ group.in_progress_not_approved }}</div>
                    <div class="stat-label">不通过</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ group.late }}</div>
                    <div class="stat-label">逾期未交</div>
                  </div>
                </div>
                
                <div :id="'progressChart-' + group.group_id" class="chart-container"></div>
              </div>
              

            </el-card>
          </div>
        </div>

        <!-- 评分管理部分 -->
        <div v-if="currentView === 'gradingManagement'">
          <div class="section-header">
            <h3><i class="el-icon-s-data"></i> 评分管理</h3>
            <div class="section-tools">
              <el-input 
                placeholder="搜索学生" 
                prefix-icon="el-icon-search" 
                v-model="searchStudent" 
                clearable 
                class="search-input"
              ></el-input>
            </div>
          </div>
          
          <el-card shadow="hover" class="score-card">
            <div v-if="teacherScores.length === 0" class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无评分数据</p>
            </div>
            <div v-else>
              <el-table 
                :data="filteredScores" 
                stripe 
                border 
                style="width: 100%"
                :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266', fontWeight: 'bold'}"
                :row-class-name="tableRowClassName"
              >
                <el-table-column prop="task_title" label="任务" width="180" sortable></el-table-column>
                <el-table-column prop="student.username" label="学生" width="120" sortable></el-table-column>
                <el-table-column prop="quality" label="任务质量分" width="100" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.quality)" effect="light">{{ row.quality }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="engagement" label="参与积极性分" width="120" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.engagement)" effect="light">{{ row.engagement }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="negotiate" label="协商分" width="100" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.negotiate)" effect="light">{{ row.negotiate }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="on_time" label="准时完成分" width="120" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.on_time)" effect="light">{{ row.on_time }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="rematch_willingness" label="重组意愿分" width="120" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.rematch_willingness)" effect="light">{{ row.rematch_willingness }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="total" label="总分" width="100" sortable>
                  <template #default="{row}">
                    <el-tag :type="getScoreType(row.total)" effect="dark">{{ row.total }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="修改质量分" width="180">
                  <template #default="{row}">
                    <el-input-number 
                      v-model="qualityUpdates[row.student.user_id]" 
                      :min="0" 
                      :max="100" 
                      :step="1"
                      size="small"
                      controls-position="right"
                    ></el-input-number>
                  </template>
                </el-table-column>
              </el-table>
              
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="teacherScores.length"
                class="pagination"
              >
              </el-pagination>
            </div>
          </el-card>
          
          <el-card shadow="hover" class="weight-card">
            <div slot="header" class="weight-header">
              <span><i class="el-icon-setting"></i> 评分权重设置</span>
            </div>
            <el-form :model="weights" label-position="top" class="weight-form">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="任务质量权重">
                    <el-slider 
                      v-model="weights.quality" 
                      :min="0" 
                      :max="1" 
                      :step="0.01" 
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="参与积极性权重">
                    <el-slider 
                      v-model="weights.engagement" 
                      :min="0" 
                      :max="1" 
                      :step="0.01"
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="协商分权重">
                    <el-slider 
                      v-model="weights.negotiate" 
                      :min="0" 
                      :max="1" 
                      :step="0.01"
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="准时完成分权重">
                    <el-slider 
                      v-model="weights.on_time" 
                      :min="0" 
                      :max="1" 
                      :step="0.01"
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="重组意愿分权重">
                    <el-slider 
                      v-model="weights.rematch_willingness" 
                      :min="0" 
                      :max="1" 
                      :step="0.01"
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="选择任务">
                    <el-select v-model="selectedTaskId" placeholder="请选择任务">
                      <el-option 
                        v-for="task in scoringTasks" 
                        :key="task.id" 
                        :label="task.title" 
                        :value="task.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <div class="weight-actions">
                <el-button type="primary" icon="el-icon-check" @click="finalizeScores" :loading="isSubmitting">提交权重并结束任务</el-button>
                <el-button type="info" icon="el-icon-refresh" @click="resetWeights">重置权重</el-button>
              </div>
            </el-form>
          </el-card>
        </div>

        <!-- 申诉处理部分 -->
        <div v-if="currentView === 'appealsHandling'">
          <h3>申诉处理</h3>
          <div v-if="appeals.length === 0">
            <p>暂无申诉</p>
          </div>
          <div v-else>
            <el-card v-for="appeal in appeals" :key="appeal.id" class="appeal-card">
              <p><strong>任务：</strong>{{ appeal.task_title }}</p>
              <p><strong>小组：</strong>{{ appeal.group_name }}</p>
              <p><strong>学生：</strong>{{ appeal.student.username }}</p>
              <p><strong>申诉理由：</strong>{{ appeal.reason }}</p>
              <p><strong>申诉时间：</strong>{{ appeal.created_at }}</p>
              <p><strong>状态：</strong>{{ appeal.status }}</p>
              <el-button v-if="appeal.status === 'pending'" size="small" type="success" @click="updateAppeal(appeal.id, 'approved')">同意</el-button>
              <el-button v-if="appeal.status === 'pending'" size="small" type="danger" @click="updateAppeal(appeal.id, 'rejected')">反对</el-button>
            </el-card>
          </div>
        </div>

        <!-- 历史任务分析部分 -->
        <div v-if="currentView === 'historyAnalysis'">
          <h3>历史任务分析</h3>
          <div v-if="historyTasks.length === 0">
            <p>暂无历史任务</p>
          </div>
          <ul>
            <li v-for="task in historyTasks" :key="task.id" class="task-thumbnail">
              <h4>{{ task.title }}</h4>
              <p>{{ task.description }}</p>
              <el-button type="primary" size="small" @click="viewAnalysis(task)">查看分析</el-button>
            </li>
          </ul>
        </div>
      </div>
    </el-main>

    <!-- 编辑任务弹窗 -->
    <div v-if="isEditing" class="edit-task-modal">
      <h3>编辑任务</h3>
      <form @submit.prevent="submitEdit">
        <label>标题：</label>
        <input v-model="currentTask.title" required>
        <label>描述：</label>
        <input v-model="currentTask.description" required>
        <label>最小组员数：</label>
        <input v-model="currentTask.min_group_size" required>
        <label>最大组员数：</label>
        <input v-model="currentTask.max_group_size" required>
        <label>截止日期：</label>
        <input v-model="currentTask.deadline" required>
        <label>评分标准：</label>
        <input v-model="currentTask.scoring_criteria" required>
        <el-button type="primary" native-type="submit">保存</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </form>
    </div>
  </el-container>
</template>

<script>
import axios from '@/axiosInstance';
import { ref, nextTick, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts';

export default {
  name: "TeacherDashboard",
  data() {
    return {
      currentView: "taskManagement", // 默认显示任务管理
      tasks: [], // 任务列表
      progressData: [], // 进度追踪接口返回的数据
      filterStatus: "", // 筛选条件
      currentTask: {}, // 当前选中的任务
      isEditing: false,
      appeals: [],  // 申诉列表
      teacherScores: [], // 教师评分数据
      scoringTasks: [], // 状态为 scoring 的任务
      selectedTaskId: "", // 选择的任务ID，用于结束任务
      weights: {
        quality: 0.4,
        engagement: 0.2,
        negotiate: 0.2,
        on_time: 0.1,
        rematch_willingness: 0.1
      },
      qualityUpdates: {}, // 键为学生ID，值为教师修改后的 quality 分数
      historyTasks: [], // 历史任务（状态为 finished）的列表
      searchStudent: "", // 搜索学生的关键词
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示的记录数
    };
  },
  methods: {
    switchView(viewName) {
      // 先更新当前视图状态
      this.currentView = viewName;
      
      // 根据视图类型加载相应数据
      try {
        if (viewName === 'appealsHandling') {
          this.fetchAppeals();
        } else if (viewName === 'progressTracking') {
          this.fetchProgressData();
        } else if (viewName === 'gradingManagement') {
          this.fetchTeacherScores();
        } else if (viewName === 'historyAnalysis') {
          this.fetchHistoryTasks();
        } else if (viewName === 'taskManagement') {
          this.fetchTasks();
        }
      } catch (error) {
        console.error(`加载${viewName}数据失败:`, error);
      }
    },
    async deleteTask(taskId) {
      const confirmDelete = confirm("确定要删除这个任务吗？");
      if (!confirmDelete) return;
      try {
        const response = await axios.delete(`/tasks/${taskId}/delete/`);
        if (response.data.status === "success") {
          alert("任务删除成功");
          await this.fetchTasks();
        } else {
          alert("删除失败：" + response.data.message);
        }
      } catch (error) {
        console.error("删除任务失败：", error);
        alert("任务删除失败，请稍后重试");
      }
    },
    async fetchTasks() {
      try {
        const user = this.$store.state.user || JSON.parse(localStorage.getItem("user"));
        await axios.post('/api/check-and-update-task-statuses/', {
          teacher_id: user.user_id
        });
        if (!user || !user.user_id) {
          alert("用户未登录或用户信息缺失");
          this.$router.push("/login");
          return;
        }
        const teacherId = user.user_id;
        const response = await axios.get("http://39.105.217.183:8000/teacher/tasks/", {
          params: {
            teacher_id: teacherId,
            status: this.filterStatus || "",
          },
        });
        if (response.data.status === "success") {
          this.tasks = response.data.data;
          this.scoringTasks = this.tasks.filter(task => task.status === "scoring");
          if (this.scoringTasks.length > 0 && !this.selectedTaskId) {
            this.selectedTaskId = this.scoringTasks[0].id;
          }
        } else {
          alert("任务获取失败：" + response.data.message);
        }
      } catch (error) {
        console.error("任务获取失败:", error.message || error);
        alert("任务获取失败，请稍后重试");
      }
    },
    async viewTask(task) {
      this.$router.push({
        path: '/task-details',
        query: { taskId: task.id, taskName: task.title },
      });
    },
    editTask(task) {
      this.currentTask = { ...task };
      this.isEditing = true;
    },
    async submitEdit() {
      try {
        const response = await axios.post(`/tasks/${this.currentTask.id}/edit/`, {
          title: this.currentTask.title,
          description: this.currentTask.description,
          min_group_size: this.currentTask.min_group_size,
          max_group_size: this.currentTask.max_group_size,
          deadline: this.currentTask.deadline,
          scoring_criteria: this.currentTask.scoring_criteria,
        });
        if (response.data.status === "success") {
          alert("任务更新成功");
          this.isEditing = false;
          await this.fetchTasks();
        } else {
          alert("编辑失败：" + response.data.message);
        }
      } catch (error) {
        console.error("编辑任务失败：", error);
        alert("编辑任务失败，请稍后重试");
      }
    },
    cancelEdit() {
      this.isEditing = false;
      this.currentTask = {};
    },
    async fetchAppeals() {
      try {
        const user = this.$store.state.user || JSON.parse(localStorage.getItem("user"));
        if (!user || !user.user_id) {
          alert("用户未登录");
          this.$router.push("/login");
          return;
        }
        const response = await axios.get("http://39.105.217.183:8000/api/get-teacher-appeals/", {
          params: { teacher_id: user.user_id }
        });
        this.appeals = response.data.appeals;
      } catch (error) {
        console.error("获取申诉失败：", error);
        alert("获取申诉失败，请稍后重试");
      }
    },
    async updateAppeal(appealId, decision) {
      try {
        const response = await axios.post("http://39.105.217.183:8000/api/update-appeal-status/", {
          appeal_id: appealId,
          decision: decision
        });
        alert(response.data.message);
        await this.fetchAppeals();
      } catch (error) {
        console.error("更新申诉失败：", error);
        alert("更新申诉失败，请稍后重试");
      }
    },
    async fetchProgressData() {
      try {
        const user = this.$store.state.user || JSON.parse(localStorage.getItem("user"));
        if (!user || !user.user_id) {
          alert("用户未登录");
          this.$router.push("/login");
          return;
        }
        const response = await axios.get("http://39.105.217.183:8000/api/progress-tracking/", {
          params: { teacher_id: user.user_id }
        });
        this.progressData = response.data.progress;
        
        // 清除所有可能存在的图表实例
        this.progressData.forEach(group => {
          const chartId = "progressChart-" + group.group_id;
          const chartDom = document.getElementById(chartId);
          if (chartDom) {
            echarts.dispose(chartDom);
          }
        });
        
        // 使用nextTick确保DOM已更新
        nextTick(() => {
          // 初始化新的图表
          if (this.currentView === 'progressTracking') {
            this.progressData.forEach(group => {
              this.initProgressChart(group);
            });
          }
        });
      } catch (error) {
        console.error("获取进度数据失败：", error);
        alert("获取进度数据失败，请稍后重试");
      }
    },
    initProgressChart(group) {
      const chartId = "progressChart-" + group.group_id;
      const chartDom = document.getElementById(chartId);
      if (!chartDom) return;
      
      // 清除可能存在的旧图表实例
      echarts.dispose(chartDom);
      
      const myChart = echarts.init(chartDom);
      
      // 准备饼图数据
      const pieData = [
        { value: group.in_progress, name: '进行中', itemStyle: { color: '#409EFF' } },
        { value: group.on_time, name: '按时完成', itemStyle: { color: '#67C23A' } },
        { value: group.in_progress_not_approved, name: '不通过', itemStyle: { color: '#F56C6C' } },
        { value: group.late, name: '逾期未交', itemStyle: { color: '#E6A23C' } }
      ];
      
      const option = {
        title: {
          text: "任务状态分布",
          left: "center",
          textStyle: {
            fontWeight: 'bold',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['进行中', '按时完成', '不通过', '逾期未交']
        },
        series: [{
          name: '任务状态',
          type: 'pie',
          radius: ['40%', '70%'],  // 环形图
          avoidLabelOverlap: false,
          label: {
            show: true,
            formatter: '{b}: {c}'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: pieData
        }]
      };
      
      myChart.setOption(option);
      
      // 使用局部变量存储resize函数，以便后续可以移除
      const resizeHandler = () => {
        if (myChart && !myChart.isDisposed()) {
          myChart.resize();
        }
      };
      
      // 移除可能存在的旧事件监听器
      window.removeEventListener('resize', resizeHandler);
      
      // 添加新的事件监听器
      window.addEventListener('resize', resizeHandler);
      
      // 在组件销毁或视图切换时清理图表和事件监听器
      return () => {
        window.removeEventListener('resize', resizeHandler);
        if (myChart && !myChart.isDisposed()) {
          myChart.dispose();
        }
      };
    },
    async fetchTeacherScores() {
      try {
        const user = this.$store.state.user || JSON.parse(localStorage.getItem("user"));
        if (!user || !user.user_id) {
          alert("用户未登录");
          this.$router.push("/login");
          return;
        }
        const response = await axios.get("http://39.105.217.183:8000/api/get-teacher-scores/", {
          params: { teacher_id: user.user_id }
        });
        console.log("教师评分数据：", response.data);
        if (response.data && response.data.scores) {
          this.teacherScores = response.data.scores.map(score => ({
            ...score,
            quality: score.quality || 0,
            engagement: score.engagement || 0,
            negotiate: score.negotiate || 0,
            on_time: score.on_time || 0,
            rematch_willingness: score.rematch_willingness || 0
          }));
          this.teacherScores.forEach(score => {
            if (score.student && score.student.user_id) {
              this.qualityUpdates[score.student.user_id] = score.quality;
            }
          });
        } else {
          this.teacherScores = [];
        }
      } catch (error) {
        console.error("获取评分数据失败：", error);
        alert("获取评分数据失败，请稍后重试");
      }
    },
    async finalizeScores() {
      if (!this.selectedTaskId) {
        alert("请选择一个任务");
        return;
      }
      try {
        if(this.weights.quality + this.weights.engagement + this.weights.negotiate + this.weights.on_time + this.weights.rematch_willingness !== 1) {
          alert("权重总和必须为1");
          return;
        }
        const payload = {
          task_id: this.selectedTaskId,
          weights: this.weights,
          quality_updates: this.qualityUpdates
        };
        const response = await axios.post("http://39.105.217.183:8000/api/finalize-task-scores/", payload);
        alert(response.data.message);
        await this.fetchTasks();
        await this.fetchTeacherScores();
      } catch (error) {
        console.error("提交评分权重失败：", error);
        alert("提交评分权重失败，请稍后重试");
      }
    },
    async fetchHistoryTasks() {
      try {
        const user = this.$store.state.user || JSON.parse(localStorage.getItem("user"));
        if (!user || !user.user_id) {
          alert("用户未登录");
          this.$router.push("/login");
          return;
        }
        const response = await axios.get("http://39.105.217.183:8000/api/get-finished-tasks/", {
          params: { teacher_id: user.user_id }
        });
        this.historyTasks = response.data.finished_tasks;
      } catch (error) {
        console.error("获取历史任务失败：", error);
        alert("获取历史任务失败，请稍后重试");
      }
    },
    viewAnalysis(task) {
      // 点击历史任务时跳转到任务分析页面，传递 task_id
      this.$router.push({
        path: '/task-analysis',
        query: { taskId: task.id }
      });
    },
    getScoreType(score) {
      if (!score && score !== 0) return '';
      if (score >= 90) return 'success';
      if (score >= 70) return 'warning';
      return 'danger';
    },
    calculateTotalScore(score) {
      if (!score) return 0;
      return Math.round(
        score.quality * this.weights.quality +
        score.engagement * this.weights.engagement +
        score.negotiate * this.weights.negotiate +
        score.on_time * this.weights.on_time +
        score.rematch_willingness * this.weights.rematch_willingness
      );
    }
  },
  computed: {
    filteredTasks() {
      if (!this.filterStatus) return this.tasks;
      return this.tasks.filter(task => task.status === this.filterStatus);
    },
    filteredScores() {
      let scores = this.teacherScores;
      if (this.searchStudent) {
        scores = scores.filter(score => 
          score.student && score.student.username && 
          score.student.username.toLowerCase().includes(this.searchStudent.toLowerCase())
        );
      }
      return scores.map(score => ({
        ...score,
        total: this.calculateTotalScore(score)
      }));
    }
  },
  mounted() {
    if (!this.$store.state.user) {
      alert("用户未登录");
      this.$router.push("/login");
    } else {
      this.fetchTasks();
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.teacher-dashboard {
  display: flex;
  height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.sidebar {
  width: 220px;
  background-color: #f0f2f5;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  transition: width 0.3s;
  z-index: 10;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
}

.menu {
  height: 100%;
  border-right: none;
  background-color: transparent;
}

/* 修改侧边栏文字颜色，使其与背景形成对比 */
.el-menu-item {
  color: #303133 !important;
  font-weight: 500;
}

.el-menu-item i {
  color: #409EFF;
  margin-right: 5px;
}

.el-menu-item.is-active {
  color: #409EFF !important;
  background-color: #e6f1fc !important;
}

.content {
  flex: 1;
  padding: 25px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.board {
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 50px);
}

/* 通用组件样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.section-header h3 {
  font-size: 1.5rem;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
}

.section-header h3 i {
  margin-right: 8px;
  color: #409EFF;
}

.section-tools {
  display: flex;
  align-items: center;
}

.search-input {
  width: 250px;
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
}

.empty-data i {
  font-size: 48px;
  margin-bottom: 15px;
}

/* 任务管理样式 */
.task-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter {
  display: flex;
  align-items: center;
}

.filter label {
  margin-right: 10px;
}

.task-thumbnail {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.task-thumbnail:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.task-thumbnail h4 {
  margin-top: 0;
  color: #303133;
  font-size: 1.2rem;
}

.task-thumbnail p {
  margin: 8px 0;
  color: #606266;
}

/* 进度追踪样式 */
.progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.progress-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.progress-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.progress-header {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.task-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #303133;
}

.separator {
  color: #909399;
  margin: 0 5px;
}

.leader-info {
  font-size: 0.9rem;
  color: #606266;
}

.progress-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 8px;
  flex: 1;
  min-width: 60px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #409EFF;
}

.stat-label {
  font-size: 0.8rem;
  color: #909399;
  margin-top: 5px;
}

.chart-container {
  height: 300px;
  margin: 10px 0;
}

.progress-footer {
  padding: 15px;
  border-top: 1px solid #ebeef5;
}

/* 评分表格样式 */
.score-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.weight-card {
  margin-top: 25px;
  border-radius: 8px;
}

.weight-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: #303133;
}

.weight-form {
  padding: 20px 0 0 0;
}

.weight-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

/* 申诉卡片样式 */
.appeal-card {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}

/* 编辑任务弹窗 */
.edit-task-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-task-modal form {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.edit-task-modal h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.3rem;
  color: #303133;
}

.edit-task-modal label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #606266;
}

.edit-task-modal input {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.edit-task-modal input:focus {
  border-color: #409EFF;
  outline: none;
}

.edit-task-modal button {
  margin-top: 15px;
  margin-right: 10px;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}
</style>